<template>
	<view class="dataList">
		<!-- <view class="dataList_title flexjsbac" >
			<text>修改预约时间</text>
		</view> -->
		<scroll-view scroll-x style="background-color: #fff;">
		    <view class="tabs-box">
		      <view
		        v-for="(item, index) in tabList"
		        :key="index"
		        :class="['tabs-item', tabActive === item.value ? 'active-item' : '']"
		        @click="clickTabsItem(item)"
		      >
		        <view class="item">{{ item.label }}</view>
				    <view class="item">{{ item.time }}</view>
		        <view v-if="tabActive === item.value" class="bottom-line"></view>
		      </view>
		    </view>
		</scroll-view>
		
		<view class="timeSelectList">
			<view class="timeSelect" v-for="(item,index) in timeList" :key="index">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'Booking',
		data(){
			return{
				tabList: [],
				tabActive:null,
				timeList:[]
			}
		},
		created() {
			this.handelTab()
		},
		methods:{
			clickTabsItem(item){
				this.tabActive = item.value
			},
			// handelTab(){
			// 	//填充tabsList
			// 	const nowDate = new Date().getTime();
			// 	const date = 1000 * 3600 * 24;
			// 	const seconds = 60 * 15 * 1000;
			// 	const week = {
			// 		0:'星期日',
			// 		1:'星期一',
			// 		2:'星期二',
			// 		3:'星期三',
			// 		4:'星期四',
			// 		5:'星期五',
			// 		6:'星期六',
			// 	}
			// 	Array.from({length: 7}, (x,i) => {
			// 		const indexDateGetTime = nowDate + date*i
			// 		const DateGetTime = nowDate + seconds*i
			// 		const indexMonth = new Date(indexDateGetTime).getMonth() + 1
			// 		const indexDate = new Date(indexDateGetTime).getDate()
			// 		const indexWeek = new Date(indexDateGetTime).getDay()
			// 		const indexHours = new Date(DateGetTime).getHours()
			// 		const indexSeconds = new Date(DateGetTime).getSeconds()
			// 		if(indexSeconds < 15){
			// 			indexSeconds == 0
			// 		}else if(30 < indexSeconds < 45){
			// 			indexSeconds == 30
			// 		}
			// 		if(i == 0){
			// 			this.tabActive = indexWeek
			// 		}
			// 		if(i < 7){
			// 			this.tabList.push({
			// 				label:`${indexMonth}月${indexDate}日`,
			// 				value:indexWeek,
			// 				time:week[indexWeek]
			// 			    }
			// 			)
			// 		}
			// 		this.timeList.push(`${indexHours}:${indexSeconds}`)
			// 	})
			// },
      handelTab(){
				//填充tabsList
				const nowDate = new Date().getTime();
				const date = 1000 * 3600 * 24;
				const seconds = 60 * 15 * 1000;
				const week = {
					0:'周天',
					1:'周一',
					2:'周二',
					3:'周三',
					4:'周四',
					5:'周五',
					6:'周六',
				}
				Array.from({length: 7}, (x,i) => {
					const indexDateGetTime = nowDate + date*i
					const DateGetTime = nowDate + seconds*i
					const indexMonth = new Date(indexDateGetTime).getMonth() + 1
					const indexDate = new Date(indexDateGetTime).getDate()
					const indexWeek = new Date(indexDateGetTime).getDay()
					const indexHours = new Date(DateGetTime).getHours()
					const indexSeconds = new Date(DateGetTime).getSeconds()
					if(indexSeconds < 15){
						indexSeconds == 0
					}else if(30 < indexSeconds < 45){
						indexSeconds == 30
					}
					if(i == 0){
						this.tabActive = indexWeek
						week[indexWeek]= '今天'
					}
					if(i < 7){
						this.tabList.push({
							label:`${indexMonth}月${indexDate}日`,
							value:indexWeek,
							time:week[indexWeek]
						    }
						)
					}
					this.timeList.push(`${indexHours}:${indexSeconds}`)
				})
			},
		},
		
		}
</script>

<style lang="scss" scoped>
	.dataList{
		.tabs-box {
		    position: relative;
		    display: flex;
		    align-items: center;
			  background-color: #fff;
		    // height: 100rpx;
		    padding: 20rpx 28rpx;
        border-bottom: 10rpx solid rgba(245, 245, 245, 1);
			.tabs-item {
		      display: flex;
			    flex-direction: column;
		      justify-content: center;
		      align-items: center;
		      margin: 0 28rpx;
          // padding: 0 10rpx;
		      min-width: 130rpx;
		      font-size: 28rpx;
		      font-family: PingFang SC;
		      font-weight: 500;
		      color: #666666;
          // border-bottom: 10rpx solid rgba(245, 245, 245, 1);
			  .item{
				  margin: 5rpx 0;
			  }
		    }
		    .active-item {
		      font-weight: bold;
			    color: #333;
		    }
		    .bottom-line {
		      position: absolute;
		      bottom: -10rpx;
		      // width: 80rpx;
		      // height: 6rpx;
		      // background: #333;
		      // border-radius: 3rpx;
          width: 56rpx;
          height: 10rpx;
          opacity: 1;
          border-radius: 16rpx;
          background: rgba(194, 126, 21, 1);
		    }
		  }
		  .dataList_title{
					font-size: 32rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: #333333;
					text-align: left;
					vertical-align: top;
					border-bottom: 1px solid #E6E6E6;
					background-color: #fff;
					padding: 24rpx;
				}
		.timeSelectList{
			display: flex;
			flex-wrap: wrap;
      padding: 38rpx 45rpx 0;
			.timeSelect{
				// width: 104rpx;
        width: 18%;
				height: 48rpx;
				margin: 10rpx 7rpx;
				border: 1px solid #666666;
				opacity: 1;
				border-radius: 10rpx;
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx 10rpx 10rpx 10rpx;
			}
		}
	}

</style>